<template>
    <div class="clearfix personal">
      <!-- 信息栏 S -->
      <div class="userinfo__warp">
        <div class="bg-box"></div>
        <p class="title">个人中心</p>
        <div class="avatar-name__warp">
          <div class="avatar">
            <img :src="userInfo.avatar" alt="" width="100%" height="100%">
          </div>
          <p class="name"> {{ userInfo.name }}</p>
        </div>
        <div class="communication">
          <div class="phone" v-if="false">
            <i class="icon iconfont">&#xe62d;</i>
            <p class="number">{{ userInfo.phone }}</p>
            <p class="text">手机号</p>
          </div>
          <div class="wx-warp" v-if="false">
            <i class="icon iconfont">&#xe63d;</i>
            <p class="number">{{ userInfo.wx }}</p>
            <p class="text">微信号</p></div>
        </div>
      </div>
      <!-- 信息栏 E -->

      <!-- 用户 跳转块 S -->
      <div v-if="role === '1'" class="weui-cells">
        <a class="weui-cell weui-cell_access" href="javascript:;" @click="registerOpen">
          <div class="weui-cell__hd"><i class="iconfont">&#xe635;</i></div>
          <div class="weui-cell__bd">
            <p>成为运营商</p>
          </div>
          <div class="weui-cell__ft"></div>
        </a>

        <a class="weui-cell weui-cell_access" href="javascript:;" @click="openBox">
          <div class="weui-cell__hd"><i class="iconfont" style="color: #81cf4e;">&#xe634;</i></div>
          <div class="weui-cell__bd">
            <p>绑定手机</p>
          </div>
          <div class="weui-cell__ft">{{ userInfo.phone ? userInfo.phone : '' }}</div>
        </a>
      </div>
      <!-- 用户 跳转块 E -->

      <!-- 运营商 跳转块 S -->
      <div v-else-if="role === '2'" class="weui-cells boxShadow">
        <!--<router-link to="/cash/wx">-->
          <!--<a class="weui-cell weui-cell_access" href="javascript:;">-->
            <!--<div class="weui-cell__hd"><i class="iconfont" style="color: #feb23b;">&#xe631;</i></div>-->
            <!--<div class="weui-cell__bd">-->
              <!--<p>提现</p>-->
            <!--</div>-->
            <!--<div class="weui-cell__ft"></div>-->
          <!--</a>-->
        <!--</router-link>-->
        <router-link to="/feedbackForOper" class="weui-cell weui-cell_access">
            <div class="weui-cell__hd"><i class="iconfont" style="color: #81cf4e;">&#xe630;</i></div>
            <div class="weui-cell__bd">
              <p>反馈</p>
            </div>
            <div class="weui-cell__ft"></div>
        </router-link>
      <router-link class="weui-cell weui-cell_access" to="/price">
        <div class="weui-cell__hd"><i class="iconfont" style="color: #4fa9fd;">&#xe7c7;</i></div>
        <div class="weui-cell__bd">
          <p>程序定价</p>
        </div>
        <div class="weui-cell__ft"></div>
      </router-link>
    </div>
      <!-- 运营商 跳转块 E -->

      <!-- 弹窗 S -->
      <QDialog title="绑定手机" class="bind-phone-wrap" v-model="dialogStatusCood" :open="clear">
        <form action="">
          <div class="phoneNumber wrap">
            <input type="text" placeholder="请输入手机号" v-model="mobileNumber">
          </div>
          <div class="code wrap">
            <div class="code-input-wrap">
              <input v-model="verificationCood" type="text"  placeholder="请输入验证码">
            </div>
            <a src="javascript:;" :class="{disable: codeLoading}" class="weui_btn weui_btn_disabled weui_btn_mini weui_btn_primary" @click="getCood">
              {{ codeTip }}{{ codeLoading ? '(' + sec + ')' : '' }}
            </a>
          </div>
          <div class="wrap bind">
            <a class="weui_btn weui_btn_disabled weui_btn_mini weui_btn_primary" @click="bind">绑&emsp;定</a>
          </div>
        </form>
      </QDialog>
      <!-- 弹窗 E -->
    </div>
</template>
<script>
  import QDialog from '@/components/q_dialog';
  import { mapState } from 'vuex';
  import * as api from 'api';
  let timer = 0;
  export default {
    data () {
      return {
        bindPhone: 1,
        username: 'LILI',
        phoneNumber: 19090909090,
        wxNumber: 'wx_abcdefg',
        dialogStatusCood: false,
        verificationCood: '',
        codeTip: '获取验证码',
        codeLoading: false,
        sec: 60,
        mobileNumber: ''
      }
    },
    components: {
      QDialog
    },

    created () {
      this.$store.dispatch('updateOpenId', this.$route.params.openId)
    },

    methods: {
      openBox () {
        if (this.userInfo.phone) {
          return;
        }
        this.dialogStatusCood = !this.dialogStatusCood
      },

      getCood () {
        if (this.codeLoading) {
          return;
        }
        if (this.mobileNumber.trim() === '') {
          this.Toast('请输入手机号码');
          return;
        } else if (!/^(0|86|17951)?(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/.test(this.mobileNumber.trim())) {
          this.Toast('请输入正确的手机号码');
          return;
        }
        api.registerCode({
          'telphoneNum': this.mobileNumber,
          'openId': this.userInfo.openId
        })
          .then(res => {
            this.codeLoading = true;
            this.codeTip = '重新获取验证码'
            timer = setInterval(() => {
              if (this.sec === 0) {
                clearInterval(timer);
                this.codeLoading = false;
                this.sec = 60;
              }
              this.sec -= 1;
            }, 1000)
          })
      },

      bind () {
        if (this.mobileNumber.trim() === '') {
          this.Toast('请输入手机号码');
          return;
        } else if (!/^(0|86|17951)?(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/.test(this.mobileNumber.trim())) {
          this.Toast('请输入正确的手机号码');
          return;
        } else if (this.verificationCood.trim() === '') {
          this.Toast('请输入验证码');
          return;
        }
        api.bindPhone({
          'phone': this.mobileNumber,
          'validate': this.verificationCood,
          'openid': this.userInfo.openId,
          'id': this.userInfo.id
        })
          .then(res => {
            this.Toast('绑定成功')
            this.dialogStatusCood = false;
            this.$store.dispatch('getUserInfo')
          })
          .catch((res) => {
            this.Toast(res.resultDetail);
          })
      },

      clear () {
        this.phoneNumber = '';
        this.verificationCood = '';
      },

      // 点击成为运营商是否跳转到注册页面
      agent () {
        this.Toast('已成为运营商')
      },

      registerOpen () {
        if (this.$store.state.userInfo.phone) {
          api.becomeAgency({
            id: this.$store.state.userInfo.id,
            phone: this.$store.state.userInfo.phone
          })
            .then(res => {
              weui.toast(res.resultDetail, 1000);
              this.$store.dispatch('getUserInfo')
            })
            .catch(res => {
              this.Toast('注册失败');
            })
        } else {
          this.$router.push('/registerOpen');
        }
      }
    },

    computed: {
      ...mapState({
        route: state => state.route,
        path: state => state.route.path,
        role: state => state.userInfo.role,
        userInfo: state => state.userInfo
      })
    },

    mounted () {
      this.title('个人中心');
    }
  }
</script>
<style lang="scss">
  @import '../../../styles/user/personal/index';
</style>
